<template>
  <el-dialog
    v-if="show"
    v-model="dialog"
    :title="detailId ? '修改Banner' : '新增Banner'"
    class="ContentDetailDialog"
    width="55%"
    :close-on-click-modal="false"
    :before-close="handleClose"
    top="4vh"
  >
    <el-row :gutter="20">
      <el-col :span="16">
        <div class="my_card">
          <div class="header">内容基本信息</div>
          <el-row class="elrow">
            <el-form label-width="100px" :model="form" label-position="left">
              <el-form-item label="主标题：">
                <el-input v-model="form.name" style="width: 500px" placeholder="请输入主标题" />
              </el-form-item>
              <el-form-item label="内容类型：">
                <el-input v-model="form.name" placeholder="请输入内容类型" />
              </el-form-item>
              <el-form-item label="内容描述：">
                <el-input v-model="form.name" placeholder="请输入内容描述" />
              </el-form-item>
              <el-form-item label="栏目序号：">
                <el-input v-model="form.name" placeholder="请输入栏目序号" />
              </el-form-item>
              <el-form-item label="跳转链接：">
                <el-input v-model="form.name" placeholder="请输入跳转链接" />
              </el-form-item>
            </el-form>
          </el-row>
        </div>

        <div class="btnBox">
          <el-button   type="primary" style="width: 100px;">保 存</el-button>
           <el-button  style="width: 100px;" @click="handleClose">取 消</el-button>
        </div>


      </el-col>
      <el-col :span="8">
        <div class="my_card">
          <div class="header">头图管理</div>
          <el-row class="elrow">
            <el-upload
              class="upload-demo"
              drag
              action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
              multiple
            >
              <div class="flexBox">
                <el-icon><upload-filled /></el-icon>上传图片
              </div>
            </el-upload>
          </el-row>
        </div>

        <div class="my_card">
          <div class="header">内容图片</div>
          <el-row class="elrow">
            <el-upload
              class="upload-demo"
              drag
              action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
              multiple
            >
              <div class="flexBox">
                <el-icon><upload-filled /></el-icon>上传图片
              </div>
            </el-upload>
          </el-row>
        </div>
      </el-col>
    </el-row>
  </el-dialog>
</template>

<script lang="ts" setup>
import { reactive, ref, withDefaults } from 'vue'

interface Props {
  show: boolean
  detailId: string | null
}
const dialog = ref(true)
withDefaults(defineProps<Props>(), {
  show: false,
  detailId: null,
})
const emit = defineEmits<{
  (event: 'update:show', val: boolean): void
}>()
//弹框关闭
const handleClose = () => {
  emit('update:show', false)
}

const form = reactive({
  name: '',
})
</script>

<style lang="scss">
.ContentDetailDialog {
  .el-dialog__body {
    padding: 0px 20px 10px;
  }
  .upload-demo {
    width: 100%;
    background-color: #3cba8b;
    border-radius: 15px;

    .el-upload-dragger {
      background-color: #3cba8b;
      border-radius: 15px;
      border: none;
      color: #fff;
    }
  }
  .btnBox{
    text-align: right;
  }
  .flexBox {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .my_card {
    border: 1px solid rgba(220, 221, 221, 1);
    border-radius: 10px;
    // padding: 13px 0;
    margin-bottom: 10px;
    .header {
      color: rgba(16, 16, 16, 1);
      font-size: 16px;
      border-bottom: 1px solid rgba(220, 221, 221, 1);
      padding: 10px 24px;
      font-weight: 600;
    }
    .flexBetween {
      display: flex;
      width: 100%;
      justify-content: space-between;
      .leftTitle {
        width: 70px;
        display: inline-block;
      }
    }
    .price {
      display: inline-block;
      width: 30px;
    }
    .fontBold {
      font-weight: bold;
      color: #333;
      font-size: 15px;
    }
    .elrow {
      // text-align: right;
      border-top: 1px solid rgba(220, 221, 221, 1);
      padding: 10px 24px;
      .title {
        font-weight: 600;
        color: #333;
      }

      .flexBox {
        display: flex;
        align-items: center;
        p {
          margin: 0 10px;
        }
        .remark {
          color: #a7a7b3;
        }
        .el-icon {
          margin-right: 5px;
        }
      }
      .el-col {
        margin-bottom: 10px;
      }
    }
    .elrow:nth-child(2) {
      border-top: none !important;
    }
  }
}
</style>
